<template class="dlg">
    <!--设备名称-->
    <div class="name">
        <el-card>
            <el-row :gutter="24">
                <el-col :span="4">当前设备为：</el-col>
                <el-col :span="20">{{props.equipmentName}}</el-col>
            </el-row>
        </el-card>
    </div>
    <div class="line"></div>
    <!--设备参数-->
    <div class="paramter">
        <ParamCard :showTransformer="showTransformer"
            :showCapacitance="showCapacitance"
            :showReactance="showReactance"
            :showHardConductor="showHardConductor"
            :showSoftConductor="showSoftConductor"
            :showGIS="showGIS"
            :dataTransformer="dataTransformerF"
            :dataCapacitance="dataCapacitanceF"
            :dataReactance="dataReactanceF"
            :dataHardConductor="dataHardConductorF"
            :dataSoftConductor="dataSoftConductorF"
            :dataGIS="dataGISF"></ParamCard>
    </div>
    <div class="linetwo">
    </div>
    <!--Radio按钮-->
    <el-card>
        <div class="radiogroup">

            <el-row :gutter="24">
                <el-col :span="24">碳排放因子</el-col>
            </el-row>
            <div class="linethree">
            </div>
            <el-radio-group v-model="radio"
                style="padding-left:30px"
                @change="handleRadioChange">
                <el-radio label="1"
                    size="large">已有设备碳足迹认证数据统计</el-radio>
                <el-radio label="2"
                    style="padding-left:90px"
                    size="large">按原材料获取、成品制造运输计算碳排</el-radio>
            </el-radio-group>
        </div>
        <!--碳排放量编辑框-->
        <div class="ceedit">
            <el-row :gutter="24">
                <el-col :span="6"
                    style="padding-left:40px ;padding-top: 5px;max-width: 35%; padding-right: 0px;">整体碳排放量(tCO2)</el-col>
                <el-col :span="6">
                    <el-input></el-input>
                </el-col>
                <el-col :span="6"
                    style="padding-left:25px;padding-top: 5px ;max-width: 30%;">回收减碳量(tco2)</el-col>
                <el-col :span="6">
                    <el-input></el-input>
                </el-col>
            </el-row>
        </div>
        <div>
            <br>
        </div>
        <!--表格-->
        <div class="cetable">
            <el-table :data="dataTable"
                style="width=90%"
                max-height="200"
                height="200"
                border>

                <el-table-column label="序号"
                    type="index"
                    width="60" />

                <el-table-column v-for="item in dataTableHeader"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"></el-table-column>
            </el-table>
        </div>

    </el-card>
    <!--按钮-->
    <div class="cefoot">
        <el-row :gutter="24">
            <el-col :span="20"
                style="padding-top: 15px; padding-left:520px">
                <el-button @click="onClickButtonOK"> 确定 </el-button>
            </el-col>

            <el-col :span="2"
                style="padding-top: 15px; padding-left:50px">
                <el-button @click="onClickButtonCancle"> 取消 </el-button>
            </el-col>
        </el-row>
    </div>

</template>

<script setup>
import { sendMsgToGetEquipmentCarbonFactorInfor } from '@/utils/Interaction.js'
import ParamCard from '@/views/components/EquipmentParamCard.vue'
import { defineProps, onMounted, ref } from 'vue'

//----------------------------------------------------数据定义
//Radio 控件值
const radio = ref('1')
//当前设备名称
const props = defineProps({
  equipmentName: { type: String, default: '' },
  equipmentType: { type: String, default: '' }
})

const showTransformer = ref(true) //电压
const showCapacitance = ref(false) //电容
const showReactance = ref(false) //电抗
const showHardConductor = ref(false) //硬导体
const showSoftConductor = ref(false) //软导体
const showGIS = ref(false) //GIS

const dataTransformerF = ref([])
const dataCapacitanceF = ref([])
const dataReactanceF = ref([])
const dataHardConductorF = ref([])
const dataSoftConductorF = ref([])
const dataGISF = ref([])

//表头数据
const dataTableHeader = ref([
  {
    prop: 'materialname',
    label: '材料名称',
    width: '85'
  },
  {
    prop: 'dosage',
    label: '用量',
    width: '70'
  },
  {
    prop: 'unit',
    label: '单位',
    width: '60'
  },
  {
    prop: 'factor',
    label: '生产因子(tCO2/单位)',
    width: '170'
  },
  {
    prop: 'recovery',
    label: '回收率',
    width: '80'
  },
  {
    prop: 'carbonemission',
    label: '碳排放量(tCO2)',
    width: '140'
  }
])
//表格数据
const dataTable = ref([])
//

//----------------------------------------------------方法实现
//Radio控件改变响应
const handleRadioChange = () => {
  console.log('handleRadioChange')
}
//表格内删除按钮响应
const onClickTableDelete = (index) => {
  console.log('onClickTableDelete')
}
//确定按钮点击事件
const onClickButtonOK = () => {
  console.log('onClickButtonOK')
}
//取消按钮点击事件
const onClickButtonCancle = () => {
  console.log('onClickButtonCancle')
}

//改变parametercard的显示
const changeShow = (val) => {
  showTransformer.value = false
  showCapacitance.value = false
  showReactance.value = false
  showHardConductor.value = false
  showSoftConductor.value = false
  showGIS.value = false
  if (val == undefined) showTransformer.value = true
  if (val == '变压器') showTransformer.value = true
  if (val == '电容器') showCapacitance.value = true
  if (val == '电抗器') showReactance.value = true
  if (val == '硬导体') showHardConductor.value = true
  if (val == '软导体') showSoftConductor.value = true
  if (val == 'GIS') showGIS.value = true
}

const changeCard = (filter, val) => {
  if (filter == '变压器') dataTransformerF.value = val
  if (filter == '电容器') dataCapacitanceF.value = val
  if (filter == '电抗器') dataReactanceF.value = val
  if (filter == '硬导体') dataHardConductorF.value = val
  if (filter == '软导体') dataSoftConductorF.value = val
  if (filter == 'GIS') dataGISF.value = val
}

//----------------------------------------------------响应

onMounted(() => {
  console.log('详细信息：curequipment', props.equipmentName)
  console.log('equipmentType', props.equipmentType)
  changeShow(props.equipmentType)
  const backvalone = ref([])
  const backvaltwo = ref([])
  // 渲染设备详情的数据
  sendMsgToGetEquipmentCarbonFactorInfor(props.equipmentName, backvalone, backvaltwo)
  dataTable.value = backvalone.value
  changeCard(props.equipmentType, backvaltwo.value)

  console.log('---------------------------- data :', dataTable)
  console.log('---------------------------- card :', dataTransformerF)
})
</script>

<style lang="scss">
.dlg {
  .name {
    .el-card {
      --el-card-padding: 10px;
    }
  }
  .line {
    border: 1px solid rgba(233, 225, 225);
  }
  .linetwo {
    border: 1px solid rgba(233, 225, 225);
  }
  .linethree {
    border: 1px solid rgba(233, 225, 225);
    width: 800px;
  }
}
</style>